<template>
  <scroll-view>
    <view class="reload" @click="clear">
      <uni-icons type="loop"></uni-icons>
      <text>重置</text>
    </view>
    <uni-popup ref="popup" type="dialog" class="fontContentpopup">
      <!-- 弹窗内容 -->
      <uni-popup-dialog @close="closefn" @confirm="confirm" title="重新练习">
        <!-- 下拉框选择反馈类型 -->
        清空所有练习信息
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="popup1" type="dialog" class="fontContentpopup">
      <!-- 弹窗内容 -->
      <uni-popup-dialog @close="closefn1" @confirm="confirmClear(myExer)" title="重新练习">
        <!-- 下拉框选择反馈类型 -->
        清空该题库练习信息
      </uni-popup-dialog>
    </uni-popup>
    <uni-list class="my-exer" :border="false">
      <uni-list-item
        class="card"
        :border="false"
        :note="
          '  总题数:   ' +
          myExer.questionNum +
          '  &nbsp&nbsp已答题:   ' +
          myExer.finishTotal +
          ''
        "
        :title="myExer.name"
        :showArrow="false"
        clickable
        v-for="myExer in listpage.list"
        :key="myExer.id"
      >
        <template v-slot:footer>
          <view>
            <text class="textClear" @click="clearItem(myExer)">重新练习</text>
            <text @click="toExer(myExer)" class="textIn">继续练习</text>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-load-more
      :status="listpage.status"
      :contentText="{
        contentdown: '点击查看更多',
        contentrefresh: '加载中',
        contentnomore: '到底了',
      }"
      @clickLoadMore="query(true)"
    ></uni-load-more>
  </scroll-view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { MyExer } from "@/ts";
import http from "@/utils/request";
import { noticStore } from "@/stores/notic";

// 定义变量
const popup = ref(null);
const popup1 = ref(null);
const queryForm = reactive({
  // 查询表单
  name: "", // 名称
});
const noticFn = noticStore();
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 10,
  total: 0,
  list: [] as MyExer[],
  status: "more",
});

onShow(async () => {
  query(false);
});

/**
 * 查询
 *
 * @param append 追加数据
 */
async function query(append: boolean) {
  listpage.status = "loading";
  if (append) {
    listpage.curPage++;
  } else {
    listpage.curPage = 1;
  }

  const { code, data } = await http.post("myExer/listpage", {
    ...queryForm,
    curPage: listpage.curPage,
    pageSize: listpage.pageSize,
  });

  if (code !== 200) {
    return;
  }

  listpage.total = data.total;

  if (append) {
    if (data.list.length) {
      listpage.list.push(...data.list);
    }
  } else {
    listpage.list = data.list;
  }

  listpage.list.forEach((listItem) => {
    listItem.finishTotal = 0;
  });
  if (listpage.list.length < listpage.total) {
    listpage.status = "more";
  } else {
    listpage.status = "no-more";
  }

  getmyExerInfo();
}
const getmyExerInfo = async () => {
  if (noticFn.myExerInfo.length == 0) {
    let { data, code } = await http.post("exmMyExer/get", { type: 1 });
    if (code == 200) {
      try {
        noticFn.myExerInfo = JSON.parse(data);
      } catch (error) {
        console.error("解析 JSON 数据出错：", error);
        // 在解析失败时进行处理，例如给出错误提示、记录日志等
      }
    }
  }
  listpage.list.forEach((listItem) => {
    listItem.finishTotal = 0;
    noticFn.myExerInfo.forEach((item) => {
      if (item.id == listItem.id) {
        listItem.finishTotal = item.questions.length;
      }
    });
  });
};
const clearExer = ref();
const clearItem = async (exer: any) => {
  clearExer.value = exer;
  popup1.value.open();
};
const confirmClear = async () => {
  const exer = clearExer.value;
  let myExerTo = ref();
  noticFn.myExerInfo = noticFn.myExerInfo.filter((item) => {
    return item.id != exer.id;
  });
  //listpage.list中 answered重置为0
  listpage.list.forEach((item) => {
    if (item.id == exer.id) {
      item.finishTotal = 0;
	  myExerTo.id = item.id;
	  myExerTo.name = item.name;
    }
  });
  let { data } = await http.post("exmMyExer/save", {
    type: 1,
    content: JSON.stringify(noticFn.myExerInfo),
  });
  toExer(myExerTo);
};
const closefn = () => {
  popup.value.close();
  //清空反馈内容
};
const closefn1 = () => {
  popup1.value.close();
  //清空反馈内容
};
const clear = () => {
  popup.value.open("");
};
// 提交反馈
const confirm = async () => {
  //将字体大小设置存储到本地
  noticFn.myExerInfo = [];
  let { data } = await http.post("exmMyExer/save", {
    type: 1,
    content: JSON.stringify([]),
  });
  listpage.list.forEach((listItem) => {
    listItem.finishTotal = 0;
  });
  popup.value.close();
};
// 去练习
async function toExer(exer: MyExer) {
  uni.navigateTo({
    url: `/pages/myExer/myExerPage?questionTypeId=${exer.id}&pageTitle=${exer.name}`,
  });
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: CustomFont;
  src: url("./iconfont.ttf");
}

.my-exer {
  height: 100%;
  .uni-list {
    background: linear-gradient(to bottom, #fff5f5, #f0f0f0);
  }
}
/* 固定高度，超出滚动*/

.list_content {
  height: calc(100vh - 100rpx);
  overflow-y: auto;
}
/* 卡片圆角 阴影效果*/
.card {
  margin-bottom: 15rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.test_time {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.test_card_status {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.reload {
  display: block;
  align-items: right;
  text-align: right;
  font-size: 14px;
  color: #666;
  margin: 10px;
}
.textClear {
  border: 1px solid burlywood;
  border-radius: 6px;
  padding: 6px;
  font-size: 14px;
  margin-left: 15px;
  margin-top: 150px;
  color: burlywood;
}
.textIn {
  border: 1px solid blue;
  border-radius: 6px;
  padding: 6px;
  font-size: 14px;
  margin-left: 15px;
  color: blue;
}
</style>
<style scoped>
.uni-list-item /deep/ .uni-list-item__content-title {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.uni-list-item /deep/.uni-list-item__container{
	align-items: center;
}
</style>
